<div class="step record-step panel panel-rvdstep">
	<div class="panel-heading">
		<h4 class="panel-title">
			<i ng-click='step.iface.isCollapsed = !step.iface.isCollapsed' class="fa rvd-clickable pull-left" ng-class="{'fa-caret-right': step.iface.isCollapsed, 'fa-caret-down': !step.iface.isCollapsed}"></i>
			<i ng-click='removeStep(step)' class='fa fa-trash-o pull-right rvd-clickable'></i>
			<div class="rvd-handle">
				&nbsp;
				<span  title='{{step.name}}'>{{step.label}}</span>
				<i ng-show='step.iface.headWarning' ng-click="step.iface.headWarning = undefined" class="fa fa-warning step-warning-icon rvd-clickable-text" title="{{step.iface.headWarning.title}}"></i>
			</div>
		</h4>
	</div>

	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<form name='form' novalidate>
			<div class='row form-group'>
				<div ng-if="videoSupport" class='col-md-4'>
					<div class="input-group">
						<span class="input-group-addon">{{'Media' | translate}}</span>
						<select auto-clear ng-model="step.media" class="mask-invalid form-control">
							<option value=""></option>
							<option value="audio_only">{{'audio only' | translate}}</option>
							<option value="video_only">{{'video only' | translate}}</option>
							<option value="audio_video">{{'audio and video' | translate}}</option>
						</select>
					</div>
				</div>
				<div class='col-md-4'>
					<div class="input-group">
						<span class="input-group-addon help-tooltip"  tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepContinueToTooltip' | translate}}">{{'recordStepContinueToLabel' | translate}}</span>
						<select sync-model name='next' ng-model='step.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control" required>
							<option value=""></option>
						</select>
						<!-- 
						<span class='input-group-addon'>method</span>
						<select name="method" ng-model='step.method'  class="form-control">
							<option value=""></option>
							<option value="GET">GET</option>
							<option value="POST">POST</option>
						</select>
						 -->
					</div>
					<div class="validation-error" ng-show="form.next.$invalid">{{'recordStepChooseTargetLabel' | translate}}</div>
				</div>
				<div class='col-md-3'>
					<div class="input-group">
						<span class="input-group-addon">{{'recordStepPlayBeepLabel' | translate}}</span>
						<!-- 
			            <span class="input-group-addon">
							<input ng-model='step.playBeep' type="checkbox">
						</span>
						 -->
						<select ng-model='step.playBeep' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
								<option value=''></option>
						</select>
					</div>
					
					
				</div>
			</div>
	
			<i class="fa fa-cog rvd-clickable" ng-class="{'rvd-active': step.iface.optionsVisible }" ng-click="step.iface.optionsVisible = !step.iface.optionsVisible"></i>
			<div ng-show='step.iface.optionsVisible'>
				<div class='row'>
					<br/>
					<div class='col-md-3'>
						<div class="input-group input-group-sm">
							<span class='input-group-addon help-tooltip' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepTimeoutTooltip' | translate}}">{{'recordStepTimeoutLabel' | translate}}</span>
							<input ng-model='step.timeout' auto-clear type='number' class='form-control'/>
						</div>
					</div>
					<div class='col-md-3'>
						<div class="input-group input-group-sm">
							<span class='input-group-addon help-tooltip' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepMaxTooltip' | translate}}">{{'recordStepMaxLabel' | translate}}</span>
							<input ng-model='step.maxLength' auto-clear type='number' class='form-control'/>
						</div>
					</div>
					<div class='col-md-6 fok'>
						<div class="form-inline">
							<div class="form-group fok-mode">
								<div class="input-group input-group-sm">
									<span class='input-group-addon help-tooltip ' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepFinishTooltip' | translate}}">{{'recordStepFinishLabel' | translate}}</span>
									<select ng-model="stepUi.fokMode" ng-change="fokModeChanged(stepUi.fokMode)" class="form-control">
										<option value="typekeys">Type some keys...</option>
										<option value="anykey">Any key</option>
										<option value="disabled">DISABLED</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<input ng-model='step.finishOnKey' auto-clear ng-pattern='/^[0-9\#\*]*$/' type='text' class='form-control input-sm' ng-hide="stepUi.fokMode!='typekeys'" placeholder="#*123..." />
							</div>
						</div>
					</div>
				</div>
				<div class='row form-group'>
					<div class='col-md-3'>
						<div class="input-group input-group-sm">
							<span class="input-group-addon" tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepTranscribeTooltip' | translate}}">{{'recordStepTranscribeLabel' | translate}}</span>
				            <select ng-model='step.transcribe' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
								<option value=''></option>
							</select>
							<!-- 
				            <span class="input-group-addon">
								<input ng-model='step.transcribe' auto-clear type="checkbox">
								
							</span>
							-->
						</div>				
					</div>
					<div class='col-md-6'>
						<div class="input-group input-group-sm">
							<span class='input-group-addon' tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'recordStepTranscribeCallbackTooltip' | translate}}">{{'recordStepTranscribeCallbackLabel' | translate}}</span>
							<input ng-model='step.transcribeCallback' type='text' auto-clear class='form-control' placeholder="{{'recordStepTranscribeCallbackInputPlaceholder' | translate}}"/>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
